<template>
    <div class="pages section">
        <div class="container">
            <div class="blog" ref="blog">
                <div v-for="(item, index) in list" class="row">
                    <div class="col s12">
                        <div class="blog-content">
                            <img :src="item.imageList[0].pictureUrl" alt="" style="width:100%;height:150px">
                            <div class="blog-detailt">
                                <h5><a href="">{{ item.foodName }}</a></h5>
                                <div class="date">
                                    <span><i class="fa fa-calendar"></i> {{ item.createTime }}</span>
                                </div>
                                <p>{{ item.foodDescription }}</p>
                                <div class="button-default" @click="gotoDetail(item.foodId)">阅读详情</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getDoorFoodList } from '@/api/article.js'
export default {
    data() {
        return {
            list: [
                {
                    imageList: [
                        {
                            pictureUrl: ''
                        }
                    ]
                }
            ],
            page: 1, // 当前页
            page_size: 10, // 每页总条数
            page_count: 1, // 总页数
        }
    },
    mounted() {
        this.getList();
        this.$refs.blog.addEventListener('scroll', this.lazyLoading) // 滚动到底部，再加载的处理事件
    },
    methods: {
        async getList() {
            var value = { "pageNum": this.page, "pageSize": this.page_size };
            getDoorFoodList(value).then((resp) => {
                this.list = resp.data.content;
                this.page_count = resp.data.totalPages;
            })
        },
        // 滚动加载
        lazyLoading(e) {
            const scrollTop = e.target.scrollTop // 滚动条滚动时，距离顶部的距离
            const windowHeight = e.target.clientHeight // 可视区的高度
            const scrollHeight = e.target.scrollHeight // 滚动条的总高度
            // 滚动条到底部
            if (scrollTop + windowHeight === scrollHeight) {
                this.page++
                if (this.page > this.page_count) return
                this.getList()
            }
        },
        gotoDetail(articleId) {
            this.$router.push(`/foodDetail/${articleId}`);
        }

    }
}

</script>

<style></style>